<template>
    <div class="login-wrap">
        <el-form class="login-container" @keydown.enter="toDoLogin(formRef)" :rules=rules :model="ValidateForm"
                 ref="formRef">
          <div class="title"><img src="../../assets/img/titleChart.svg"/>
            <div>{{title}}</div>
          </div>
          <el-form-item prop="userAccount" style="padding-bottom: 5px">
            <el-input type="text" v-model="ValidateForm.userAccount" placeholder="用户账号"></el-input>
          </el-form-item>
          <el-form-item prop="password" style="padding-bottom: 5px">
            <el-input type="password" v-model="ValidateForm.password" placeholder="用户密码"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="doLogin(formRef)">
              登陆
            </el-button>
          </el-form-item>
          <el-row style="text-align: center;margin-top: -10px;display: flex;justify-content: space-between">
<!--            <el-link type="primary" @click="doGetPassword">忘记密码</el-link>-->
            <el-link type="primary" @click="doGetPasswordNew">修改密码</el-link>
            <el-link type="primary" @click="doRegister">注册账号</el-link>
          </el-row>
        </el-form>
    </div>
</template>

<script setup>

import {reactive, ref} from "vue";
import {useRouter} from "vue-router";
import {ElLoading, ElMessage} from "element-plus";
import myAxios from "../../plugins/myAxios.js";

const router = useRouter();

const title = "体测管理系统";


const ValidateForm = reactive({
    userAccount: '',
    password: ''
})

var loginData = {};


//保存表单中的数据，最后来验证是否 符合规则
const formRef = ref();

//验证规则
const rules = reactive({
    userAccount: [
        {required: true, message: '账号未输入', trigger: 'blur'},
        {min: 4, max: 12, message: '长度需要大于4或者小于12', trigger: 'blur'}
    ],
    password: [
        {required: true, message: '密码未输入', trigger: 'blur'},
        {min: 6, max: 12, message: '长度需要大于6或者小于12', trigger: 'blur'}
    ]
})

const doGetPasswordNew = () => {
  ElMessage("跳转找回密码页面")
  router.push({path: '/backPasswordNew'});
}

const doGetPassword = () => {
    ElMessage("跳转找回密码页面")
    router.push({path: '/backPassword'});
}

const doRegister = () => {
    ElMessage("跳转注册页面")
    router.push({path: '/registry'});
}

//按下回车登录
const toDoLogin = (formRef) => {
    doLogin(formRef);
}
const doLogin = async (formEle) => {
    if (!formEle) {
        ElMessage.error("登录出错")
        return;
    }
    formEle.validate((valid) => {
        if (valid) {
            login();
        } else {
            ElMessage.error("账号密码不符合规则")
            return false;
        }
    })
}


const login = () => {
    const loading = ElLoading.service({
        lock: true,
        text: '极速登录中...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    myAxios.post('/user/login', {
        userAccount: ValidateForm.userAccount,
        userPassword: ValidateForm.password,
    }).then(res => {
      ElMessage.success("登录成功")
      sessionStorage.setItem('token', res.token)
      let useRole = res.userRole;
      localStorage.setItem('userRole', useRole)
      if (useRole === 1) {
        router.push({path: '/admin', replace: true});
      } else {
        router.push({path: '/home', replace: true});
      }
    }).catch(error => {
      ElMessage.error(error);
    }).finally(() => {
      loading.close()
    })
}


</script>

<style scoped lang="less">
.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url("../../assets/img/background.jpg");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: cover;
  transform: scaleX(-1);
}


.login-container {
  border-radius: 10px;
  margin: 0 250px 0;
  width: 600px;
  padding: 30px 35px 25px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  transform: scaleX(-1);
}

.title {
  margin: 0 auto 40px auto;
  text-align: center;
  color: #505458; //登录页标题
  font-size: 40px;
    //background: #646cff;
    display: flex;
    justify-content: center;
    align-items: center;
  img {
      width: 12%;
      border-radius: 5px;
      margin-right: 10px;
  }
}

.el-button {
  width: 100%;
}
</style>
